<template>
  <a-spin :spinning="spinning"
          tip="加载中...">
    <div class="home">
      <Header />
      <div class="flex container">
        <Aside />
        <div class="content p-20 flex1">
          <router-view />
        </div>
      </div>

      <AudioPlayer />
    </div>
  </a-spin>

</template>

<script>
// @ is an alias to /src
import Header from '@/components/Header/header'
import Aside from '@/components/Aside/aside'
import AudioPlayer from "@/components/AudioPlayer/audioPlayer"

import { useStore } from 'vuex'
import { computed, ref } from "vue"

export default {
  name: 'Home',
  components: {
    Header,
    Aside,
    AudioPlayer
  },
  setup() {
    const store = useStore()
    const spinning = computed(() => {
      return store.state.httpLoading || false
    })

    return {
      spinning
    }
  }
}
</script>


<style lang="scss" scoped>
.home {
  .container {
    padding-top: $header-height;
  }
  .content {
    height: calc(100vh - #{$header-height});
    overflow-y: auto;
  }
}
</style>